<!--
 * @Author: wuchao66_Git 2803670835@qq.com
 * @Date: 2023-10-31 14:57:34
 * @LastEditors: wuchao66_Git 2803670835@qq.com
 * @LastEditTime: 2023-11-02 10:29:29
 * @FilePath: \t162vue\src\views\demo3路由\p5.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div id="xialakuang">
      <select @change="xiala($event)" v-model="categoryId">
        <option :value="0">全部</option>
        <option :value="xjj.id" v-for="(xjj, index) in cates" :key="index">
          {{ xjj.name }}
        </option>
      </select>
      <el-button
        circle
        type="danger"
        @click="
          (flag = 1),
            (dialogFormVisible = true),
            (entry.id = 0),
            (entry.title = ''),
            (entry.categoryid = 3)
        "
        >增加</el-button
      >
    </div>
    <div>
      <el-dialog title="增加或者修改操作" :visible.sync="dialogFormVisible">
        <el-form :model="entry">
          <el-form-item hidden label="id" :label-width="formLabelWidth">
            <el-input v-model="entry.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动标题" :label-width="formLabelWidth">
            <el-input v-model="entry.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-select v-model="entry.categoryid" placeholder="请选择图书类型">
              <el-option
                :value="xjj.id"
                v-for="(xjj, index) in cates"
                :key="index"
                :label="xjj.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="(dialogFormVisible = false), addorupdate()"
          >
            {{ flag == 1 ? "增加" : "修改" }}</el-button
          >
        </div>
      </el-dialog>
    </div>

    <div id="page">
      <el-table :data="pagelist" style="width: 100%">
        <el-table-column prop="id" label="图书编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="图书名称" width="180">
        </el-table-column>
        <el-table-column prop="title" label="图书标题" width="180">
        </el-table-column>
        <el-table-column prop="summary" label="内容"> </el-table-column
        ><el-table-column prop="uploaduser" label="上传人"> </el-table-column
        ><el-table-column prop="createdate" label="时间"> </el-table-column>
        <el-table-column label="操作">
          <!-- 插槽技术 -->
          <el-row slot-scope="scope">
            <button @click="deleteby(scope.row.id)">删除</button>
            <button
              @click="(flag = 2), (dialogFormVisible = true), update(scope.row)"
            >
              修改
            </button>
          </el-row>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  findEntryByPage161,
  deleteEntryById161,
  updateoradd161,
} from "../../api/t161";
export default {
  data() {
    return {
      //分页集合
      pagelist: [],
      title: "",
      categoryId: 0,
      currentPage: 1,
      pageSize: 5,
      total: 5,
      //删除的id
      ids: "",
      //小表集合
      cates: [],
      //默认开始隐藏
      dialogFormVisible: false,
      formLabelWidth: "120px",
      //对象
      entry: {
        id: "",
        categoryid: "",
        title: "",
      }, //标志 1增加2 修改
      flag: 1,
    };
  },
  methods: {
    addorupdate() {
      this.updateoradd162();
    },
    update(row) {
      this.entry = row;
    },
    //下拉查询
    xiala(event) {
      this.categoryId = event.target.value;
      this.getPages(); //刷新
    },
    deleteby(id) {
      this.ids = id;
      if (confirm("干不干？")) {
        this.deleteEntryById();
      }
    }, //增加或者修改
    async updateoradd162() {
      let res = await updateoradd161(this.entry);
      if (res.data.isupdateoradd === true) {
        alert("成功");
        this.getPages(); //刷新
      } else {
        alert("失败");
      }
    },
    //删除
    async deleteEntryById() {
      let res = await deleteEntryById161(this.ids);
      if (res.data.isdelete === true) {
        alert("删除成功");
        this.getPages(); //刷新
      } else {
        alert("删除失败");
      }
    },
    //查询异步套用方法 currentPage,pageSize, title,categoryId
    async getPages() {
      let res = await findEntryByPage161(
        this.currentPage,
        this.pageSize,
        this.title,
        this.categoryId
      );
      console.log(res);
      this.pagelist = res.data.pages.records;
      this.total = res.data.pages.total;
      this.cates = res.data.cates;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getPages(); //刷新
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getPages(); //刷新
    },
  },
  created() {
    //创建就集合上来
    this.getPages();
  },
};
</script>

<style></style>
